<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload=function (){
            //当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
            var areaDiv=document.getElementById("areaDiv");
            var showMsg=document.getElementById("showMsg");
            // onmousemove     该事件会在鼠标在元素中移动时触发
            /*
            事件对象（event）:
            -当事件对象的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递响应函数
              在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标 键盘被按下的键  滚轮滚动方向
             */
            areaDiv.onmousemove=function (event){
            /*
            clientX可以获取鼠标指针当前可见窗口的水平坐标
            clientY可以获取鼠标指针当前可见窗口的垂直坐标
            pageX和pageY可以获取鼠标相对于当前页面的坐标
            */
                var x=event.clientX;
                var y=event.clientY;

                showMsg.innerHTML="x="+x+",y="+y;
            }
        }
    </script>
</head>
<body>
<div id ="areaDiv" >1</div>
<div id ="showMsg"></div>
</body>
</html>